<!doctype html>
<html>
<head>
<style>
html, body {
	height:100%;
	width:100%;
}
body {
	padding:0;
	margin:0;
}
.cursor {
	position	: absolute;
	width		: 20px;
	height		: 20px;
	background-image:url("");
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="../easyWebSocket.js"></script>
<script>
jQuery(function() {
var socket	= new EasyWebSocket("ws://cursors/moving");
var me		= Math.floor(Math.random() * 1000000).toString(32)
var cursors	= {}

socket.onopen	= function() {
	setInterval(function(){
		if( mouseCurX == mouseOldX && mouseCurY == mouseOldY )	return;
		socket.send(me + ' ' + mouseCurX + ' ' + mouseCurY)
		mouseOldX	= mouseCurX;
		mouseOldY	= mouseCurY;
	}, 0.5*1000)	
}

socket.onmessage = function(event) {
	var data = event.data.split(' ')
	if (typeof cursors[data[0]] === 'undefined') {
		cursors[data[0]] = jQuery('<div/>').attr('id', data[0]).addClass('cursor').appendTo('body')
	}
	cursors[data[0]].css({ left: data[1] + 'px', top: data[2] + 'px' })
}

var mouseCurX	= 0;
var mouseCurY	= 0;
var mouseOldX	= 0;
var mouseOldY	= 0;

$('body').bind('mousemove', function(e){
	mouseCurX	= e.pageX;
	mouseCurY	= e.pageY;
})

})
</script>

</head>
<body>
</body>
</html>
